/**
 * Created by dongchen on 16/5/19.
 */
$(function () {
    initWxConfig();

    $('.input_mobile_number').on('keyup', function(event){
        var mobileNum = $(event.target).val();
        if ((mobileNum + '').length !== 11){
            if($('.flow_package_list .op-mask').length === 0){
                $('.flow_package_list').append('<div class="op-mask"></div>');
            }
            return;
        }
        $.ajax({
            url: '/wechat/api/mobile/package',
            type : 'get',
            data : {mobile : mobileNum},
            success : function(res){
                if(res.code === 200){
                    var data = res.data;
                    renderPackageList(data);
                }else{
                    alert(res.msg);
                }
            },
            error : function(res){
                alert('系统错误');
            }
        });
    });

    wx.ready(function(){
        hideLoadingMask();

        $('.flow_package_list').delegate('a.btn_flow_charge', 'click', function(event){
            var package = $(event.target).data('package');
            var packageName = $(event.target).data('name');
            var price = $(event.target).data('price');
            var mobile = $('.input_mobile_number').val();

            var postData = {
                package : package,
                mobile : mobile,
                price : price,
                packageName : packageName
            };

            $.ajax({
                url: '/wechat/api/mobile/flow/charge',
                type: 'POST',
                data: postData,
                dataType: 'json',
                success: function (res) {
                    if(res.code === 200){
                        res = res.data;

                        wx.chooseWXPay({
                            timestamp: res.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: res.nonceStr, // 支付签名随机串，不长于 32 位
                            package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                            signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                            paySign: res.paySign, // 支付签名
                            success: function (res) {
                                // 支付成功后的回调函数
                                window.location.href = '/wechat/charge/success?target=mobile_flow_charge';
                            },
                            cancel : function (res){
                                // alert(res);
                            }
                        });
                    }else{
                        alert(res.msg);
                    }
                },
                error: function (res) {
                    alert('失败:' + res.responseJSON);
                }
            });
        });
    });

    wx.error(function(res){
        hideLoadingMask();
        alert('jsapi error: ' + res);
    });

    function showLoadingMask(){
        $('#loadingToast').css({display : 'block'});
    }

    function hideLoadingMask(){
        $('#loadingToast').css({display : 'none'});
    }

    function initWxConfig(){
        showLoadingMask();
        var appId = $('#appId').val();
        var timestamp = $('#timestamp').val();
        var nonceStr = $('#nonceStr').val();
        var configSign = $('#configSign').val();

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串
            signature: configSign,// 必填，签名，见附录1
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
    }

    function renderPackageList(data){
        var htmlTpl =
            '<%for(var i in packages){' +
            'var item = packages[i];' +
            'var sellPrice = +item.Price * discount / 10' +
            '%>' +
            '<div class="weui_cell">' +
                '<div class="weui_cell_hd weui_cell_primary">' +
                    '<label class="weui_label"><%=item.Name%></label>' +
                '</div>' +
                '<div class="weui_cell_bd weui_cell_primary">' +
                    '<%if(discount < 10){%><p class="text_discount"><%=discount%>折<span class="text_prime_cost"><%=item.Price%>元</span></p><%}%>' +
                '</div>' +
                '<div class="weui_cell_ft">' +
                    '<a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_plain_primary btn_flow_charge" data-package="<%=item.Package%>" data-price="<%=sellPrice%>" data-name="<%=item.Name%>">' +
                        '<%=sellPrice.toFixed(2)%>元' +
                    '</a>' +
                '</div>' +
            '</div>' +
            '<%}%>';
        var htmlCont;

        if(data.subSp.indexOf('陕西') == -1){
            //非陕西省不支持充值
            $('.flow_package_title').html(data.subSp + ' 暂不支持, 仅支持陕西本省移动和电信');
        }else{
            //陕西省可充值
            if(data.packages && data.packages.length){
                htmlCont = _.template(htmlTpl)({packages : data.packages, discount: data.discount});
            }else{
                htmlCont =
                    '<div class="weui_cell">' +
                    '<div class="weui_cell_bd weui_cell_primary">' +
                    '<p>无可用流量包</p>' +
                    '</div>' +
                    '</div>';
            }

            $('.flow_package_list').html(htmlCont);
            $('.flow_package_title').html(data.subSp + ' 立即生效');
        }

    }
});